<template>
	<view class="icons">
		<!-- #ifdef APP -->
		<view class="icons-item" v-for="(item,index) in indexIcons" :key="item.id" @tap="gootherpage(index)">
			<image class="icons-img" :src="item.img" mode="widthFix" lazy-load></image>
			
			<view class="icons-content">
				{{item.title}}
			</view>
		</view>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<view class="icons-item" v-for="(item,index) in indexIcons" :key="item.id" @tap="gootherpage(index)">
			<img v-lazy="item.img" class="icons-img">
			<view class="icons-content">
				{{item.title}}
			</view>
		</view>
		<!-- #endif -->
		

		
	</view>
</template>

<script>
	export default {
		props: {
			indexIcons: {
				type: Array,
				default: []
			}
		},
		methods: {
			gootherpage(index) {
				
				if (index < 3) {
					this.navigateTo({
						url: `/pages/reservation_s/reservation_s`
					})
				} else if (index == 3) {
					this.navigateTo({
						url: `/pages/tutor/tutor`
					})
				} else {
					this.navigateTo({
						url: `/pages/vipketang/vipketang`
					})
				}

			}
		}
	}
</script>

<style lang="scss">
	.icons {
		display: flex;
		flex-wrap: wrap;
		background-color: #FFFFFF;

		.icons-item {

			width: 25%;
			height: 185rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			align-items: center;

			.icons-img {
				width: 50%;
				height: 50%;
			}

			.icons-img {
				width: 50%;
				height: 50%;
			}

			.icons-content {
				width: 100%;

				text-align: center;

			}
		}
	}
</style>